<template>
	<!--重点产品预测分析功能-->
	<div class="product-forecast">
		<el-switch v-model="switchValue" @change="switchChange(value)" class="switch"
		           active-color="#a6cde2"
		           inactive-color="#2083b7"
		           active-text="工业"
		           inactive-text="农业">
		</el-switch>
		<!--	农业	-->
		<div v-if="!switchValue">
			<el-row gutter="32">
				<el-col span="11">
					<chart-block chartID="chart1" :title="blockLineOptionData.title" :optionData="blockLineOptionData" chartType="getBlockLine" height="37vh" titleType="blueBig"></chart-block>
				</el-col>
				<el-col span="13">
					<chart-block chartID="chart2" :title="shadowLineOptionData.title" :optionData="shadowLineOptionData" chartType="getShadowLine" height="37vh" titleType="blueBig"></chart-block>
				</el-col>
			</el-row>
			<el-row gutter="32" style="margin-top:2.96vh">
				<el-col span="11">
					<chart-block chartID="chart3" :title="pictorialBarOptionData.title" :optionData="pictorialBarOptionData" chartType="getPictorialBar" height="37vh" titleType="blueBig"></chart-block>
				</el-col>
				<el-col span="13">
					<chart-block chartID="chart4" :title="singleLineOptionData.title" :optionData="singleLineOptionData" chartType="getSingleLine" height="37vh"></chart-block>
				</el-col>
			</el-row>
		</div>
		<!--	工业	-->
		<div v-if="switchValue">
			<el-row gutter="32">
				<el-col span="11">
					<chart-block chartID="chart1" :title="blockLineIndustrial.title" :optionData="blockLineIndustrial" chartType="getBlockLine" height="37vh" titleType="blueBig"></chart-block>
				</el-col>
				<el-col span="13">
					<chart-block chartID="chart2" :title="singleLineIndustrial.title" :optionData="singleLineIndustrial" chartType="getSingleLine" height="37vh"></chart-block>
				</el-col>
			</el-row>
			<el-row gutter="32" style="margin-top:2.96vh">
				<el-col span="11">
					<chart-block chartID="chart3" :title="shadowLineIndustrial.title" :optionData="shadowLineIndustrial" chartType="getShadowLine" height="37vh" titleType="blueBig"></chart-block>
				</el-col>
				<el-col span="13">
					<chart-block chartID="chart4" :title="pictorialBarIndustrial.title" :optionData="pictorialBarIndustrial" chartType="getPictorialBar" height="37vh" titleType="blueBig"></chart-block>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
import {getCommonData10} from "@/api/pages";

export default {
	name: "product-forecast",
	components: {
		ChartBlock: () => import('@/components/chart-block'),
	},
	props: {},
	data() {
		return {
			switchValue: false,
			blockLineOptionData: {
				title: '',
				categoryAxis: [], //类目轴数据
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				LinearGradientColor: [//柱状图渐变色
					{
						topColor: '#47ffc0',
						bottomColor: '#0dccff'
					},
				],
			},
			shadowLineOptionData: {
				title: '',
				categoryAxis: [], //类目轴数据
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					}
				],
				smooth: true,
				legendPosition: "center",
				LinearGradientColor: [//柱状渐变颜色
					{
						topColor: 'rgba(71,253,255,0.3)',
						bottomColor: 'rgba(71,253,255,0)',
						LineCircleColor: "#47fdff",//折线图颜色
						LineCircleBorderColor: "#47fdff",//折线图描边颜色
					}
				]
			},
			pictorialBarOptionData: {
				title: '',
				categoryAxis: [], //类目轴数据
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					}
				],
				LinearGradientColor: [//柱状图渐变色
					{
						topColor: '#66f2ff',
						bottomColor: '#ff8432'
					},
				],
			},
			singleLineOptionData: {
				title: '',
				categoryAxis: [], //类目轴数据
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				barWidth:'2%',
				LinearGradientColor: [//渐变色
					{ //折线图两侧竖线数据渐变色
						topColor: "rgba(255, 109, 0,1)",
						bottomColor: "rgba(255, 109, 0,0)"
					},
					{//折线图填充区域渐变色
						topColor: "rgba(255, 109, 0,0.3)",
						bottomColor: "rgba(255, 109, 0, 0)"
					},
				],
				LineCircleColor: "#ff6d00",//折线图颜色
				LineCircleBorderColor: "#ff6d00",//折线图描边颜色
				lineRadiusColor: "#ff6d00",//折线图圆点颜色
			},
			blockLineIndustrial: {
				title: '',
				categoryAxis: [], //类目轴数据
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				LinearGradientColor: [//柱状图渐变色
					{
						topColor: '#4760FF',
						bottomColor: '#0DCCFF'
					},
				],
			},
			singleLineIndustrial: {
				title: '',
				categoryAxis: [], //类目轴数据
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				barWidth:'2%',
				LinearGradientColor: [//渐变色
					{ //折线图两侧竖线数据渐变色
						topColor: "rgba(20, 208, 225,1)",
						bottomColor: "rgba(20, 208, 225,0)"
					},
					{//折线图填充区域渐变色
						topColor: "rgba(20, 208, 225,.2)",
						bottomColor: "rgba(20, 208, 225, 0)"
					},
				],
				LineCircleColor: "#14d0e1",//折线图颜色
				LineCircleBorderColor: "#14d0e1",//折线图描边颜色
				lineRadiusColor: "#14d0e1",//折线图圆点颜色
			},
			shadowLineIndustrial: {
				title: '',
				categoryAxis: [], //类目轴数据
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					}
				],
				smooth: true,
				legendPosition: "center",
				LinearGradientColor: [//柱状渐变颜色
					{
						topColor: 'rgba(0,88,255,0.8)',
						bottomColor: 'rgba(0,88,255,0.1)',
						LineCircleColor: "#0058FF",//折线图颜色
						LineCircleBorderColor: "#00eaff",//折线图描边颜色
					},
					{
						topColor: 'rgba(211,89,0,0.8)',
						bottomColor: 'rgba(211,89,0,0.1)',
						LineCircleColor: "#D35900",//折线图颜色
						LineCircleBorderColor: "#F28E26",//折线图描边颜色
					}
				]
			},
			pictorialBarIndustrial: {
				title: '',
				categoryAxis: [], //类目轴数据
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					}
				],
				LinearGradientColor: [//柱状图渐变色
					{
						topColor:'#FE684D',
						bottomColor:'#FFC23A'
					},
				],
			},
		}
	},
	computed: {},
	created() {
		this.getAgriculturalForecast()
	},
	mounted() {
	},
	methods: {
		switchChange() {
			if (this.switchValue === true) {
				//工业
				this.getIndustrialForecast()
			} else {
				//农业
				this.getAgriculturalForecast()
			}
		},
		// 农业
		getAgriculturalForecast() {
			getCommonData10({busiCode: 'E113', cpmc: '粮食'}).then(res => {
				if (res.data.code === 200) {
					let data = res.data.data
					this.blockLineOptionData.title = data.title
					this.blockLineOptionData.categoryAxis = data.categoryAxis
					this.blockLineOptionData.seriesData = res.data.data.seriesData[0].data
					this.blockLineOptionData.unit = res.data.data.seriesData[0].unit
				}
			})
			getCommonData10({busiCode: 'E113', cpmc: '棉花'}).then(res => {
				if (res.data.code === 200) {
					let data = res.data.data
					this.shadowLineOptionData.title = data.title
					this.shadowLineOptionData.categoryAxis = data.categoryAxis
					this.shadowLineOptionData.seriesData = data.seriesData
				}
			})
			getCommonData10({busiCode: 'E113', cpmc: '油料'}).then(res => {
				if (res.data.code === 200) {
					let data = res.data.data
					this.pictorialBarOptionData.title = data.title
					this.pictorialBarOptionData.categoryAxis = data.categoryAxis
					this.pictorialBarOptionData.seriesData = data.seriesData
				}
			})
			getCommonData10({busiCode: 'E113', cpmc: '肉类'}).then(res => {
				if (res.data.code === 200) {
					let data = res.data.data
					this.singleLineOptionData.title = data.title
					this.singleLineOptionData.categoryAxis = data.categoryAxis
					this.singleLineOptionData.seriesData = data.seriesData
					//折线图两侧竖线
					let seriesData1 = []
					this.singleLineOptionData.seriesData[0].data.forEach((item, index) => {
						if (index === 0 || index === this.singleLineOptionData.seriesData[0].data.length - 1) {
							seriesData1.push(item)
						} else {
							seriesData1.push(0)
						}
					})
					this.singleLineOptionData.seriesData[1] = this.singleLineOptionData.seriesData[0]
					this.singleLineOptionData.seriesData[0] = {data: seriesData1}
				}
			})
		},
		// 工业
		getIndustrialForecast() {
			getCommonData10({busiCode: 'E113', cpmc: '原煤'}).then(res => {
				if (res.data.code === 200) {
					let data = res.data.data
					this.blockLineIndustrial.title = data.title
					this.blockLineIndustrial.categoryAxis = data.categoryAxis
					this.blockLineIndustrial.seriesData = res.data.data.seriesData[0].data
                    this.blockLineOptionData.unit = res.data.data.seriesData[0].unit
				}
			})
			getCommonData10({busiCode: 'E113', cpmc: '棉纱'}).then(res => {
				if (res.data.code === 200) {
					let data = res.data.data
					this.singleLineIndustrial.title = data.title
					this.singleLineIndustrial.categoryAxis = data.categoryAxis
					this.singleLineIndustrial.seriesData = data.seriesData
					//折线图两侧竖线
					let seriesData1 = []
					this.singleLineIndustrial.seriesData[0].data.forEach((item, index) => {
						if (index === 0 || index === this.singleLineIndustrial.seriesData[0].data.length - 1) {
							seriesData1.push(item)
						} else {
							seriesData1.push(0)
						}
					})
					this.singleLineIndustrial.seriesData[1] = this.singleLineIndustrial.seriesData[0]
					this.singleLineIndustrial.seriesData[0] = {data: seriesData1}
				}
			})
			getCommonData10({busiCode: 'E113', cpmc: '水泥'}).then(res => {
				if (res.data.code === 200) {
					let data = res.data.data
					this.shadowLineIndustrial.title = data.title
					this.shadowLineIndustrial.categoryAxis = data.categoryAxis
					this.shadowLineIndustrial.seriesData = data.seriesData
				}
			})
			getCommonData10({busiCode: 'E113', cpmc: '发电量'}).then(res => {
				if (res.data.code === 200) {
					let data = res.data.data
					this.pictorialBarIndustrial.title = data.title
					this.pictorialBarIndustrial.categoryAxis = data.categoryAxis
					this.pictorialBarIndustrial.seriesData = data.seriesData
				}
			})
		},
	},
	watch: {}
}
</script>

<style scoped lang="scss">
.product-forecast {
	width: 100%;
	height: 100%;
	padding: 7.78vh 1.67vw 0;
	overflow: hidden;
}
</style>

<style lang="scss">
.product-forecast {
	.el-switch__label {
		color: #FFFFFF;
	}

	.el-switch.is-checked .el-switch__core {
		background: #2083b7 !important;
		border-color: #2083b7 !important;
	}

	.switch {
		position: absolute;
		top: 9.8vh;
		right: 1.67vw;
	}
}
</style>
